<template>
	<div class="main" ref="scrollMain">
		<Tabs v-model="tabValue" type="top-fixed" style="background:#FFF;">
			<TabPane @change="load" name="0" label="全部" style="">
				<!-- <div class="guess-list">
					<Listitem class="align-center guess-item">
						<template slot="left">
							<img class="icon" src="@/assets/yl_img2.png" />
						</template>
						<template slot="center">
							<div>
								<div class="ft-32 ">
									<span class="ft-b">账户充值</span>
								</div>
								<div class="ft-28 guess-price">
									<span>2018.6.17 13:44</span>
								</div>
							</div>
						</template>
						<template slot="right">
							<div class="t-r ft-32 mr-40" style="color: #FD4658;">
								+100
							</div>
						</template>
					</Listitem>
					<Listitem class="align-center guess-item">
						<template slot="left">
							<img class="icon" src="@/assets/yl_img2.png" />
						</template>
						<template slot="center">
							<div>
								<div class="ft-32 ">
									<span class="ft-b">账户提现</span>
								</div>
								<div class="ft-28 guess-price">
									<span>2018.6.17 13:44 </span>
								</div>
							</div>
						</template>
						<template slot="right">
							<div class="t-r ft-32 mr-40" style="color: #5D5174;">
								-200
							</div>
						</template>
					</Listitem>
					<Listitem class="align-center guess-item">
						<template slot="left">
							<img class="icon" src="@/assets/yl_img2.png" />
						</template>
						<template slot="center">
							<div>
								<div class="ft-32 ">
									<span class="ft-b">竞猜</span>
								</div>
								<div class="ft-28 guess-price">
									<span>2018.6.17 13:44 </span>
								</div>
							</div>
						</template>
						<template slot="right">
							<div class="t-r ft-32 mr-40" style="color: #5D5174;">
								-100
							</div>
						</template>
					</Listitem>
				</div> -->
			</TabPane>
			<TabPane @change="load"  name="1" label="充值" style="">
				<!-- <div class="guess-list">
					<Listitem class="align-center guess-item">
						<template slot="left">
							<img class="icon" src="@/assets/yl_img2.png" />
						</template>
						<template slot="center">
							<div>
								<div class="ft-32 ">
									<span class="ft-b">时时猜</span>
									<span class="ft-24 guess-num">第20180528091期</span>
								</div>
								<div class="ft-28 guess-price">
									<span>投注 </span>
									<span class="co-red">6元</span>
								</div>
							</div>
						</template>
						<template slot="right">
							<div class="t-r ft-32 mr-40" style="color: #958DA5;">
								待开奖
							</div>
						</template>
					</Listitem>
				</div> -->
			</TabPane>
			<TabPane @change="load"  name="3" label="提现" style="">
				<!-- <div class="guess-list">
					<Listitem class="align-center guess-item">
						<template slot="left">
							<img class="icon" src="@/assets/yl_img2.png" />
						</template>
						<template slot="center">
							<div>
								<div class="ft-32 ">
									<span class="ft-b">时时猜</span>
									<span class="ft-24 guess-num">第20180528091期</span>
								</div>
								<div class="ft-28 guess-price">
									<span>投注 </span>
									<span class="co-red">6元</span>
								</div>
							</div>
						</template>
						<template slot="right">
							<div class="t-r ft-32 mr-40 co-red p-r">
								已中奖
							</div>
						</template>
					</Listitem>
				</div> -->
			</TabPane>
			<TabPane @change="load" name="2" label="竞猜" style="">
			</TabPane>
		</Tabs>
		<div>
			<div class="guess-list">
				<Listitem class="align-center guess-item" v-for="item in list">
					<template slot="left">
						<img class="icon" src="@/assets/yl_img2.png" />
					</template>
					<template slot="center">
						<div>
							<div class="ft-32 ">
								<span class="ft-b">{{item.type_name}}</span>
							</div>
							<div class="ft-28 guess-price">
								<span>{{item.add_time}}</span>
							</div>
						</div>
					</template>
					<template slot="right">
						<div :class="'t-r ft-32 mr-40 '+(item.money.substring(0,1)=='+'?'co-red':'')" >
							{{item.money}}
						</div>
					</template>
				</Listitem>
				<div v-show="loadingmore" class="loadmore">正在加载...</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Tabs from '@/components/tabs';
	import TabPane from '@/components/tabPane';
	import Listitem from "@/components/list-item2";
	import {getAccount} from "@/api/account";
	export default {
		components: {
			Tabs,
			TabPane,
			Listitem
		},
		data() {
			return {
				tabValue:"0",
				page:1,
				loadingmore:false,
				total:0,
				list:[],
				nowLen:0
			}
		},
		mounted(){
			this.startY=0;
			document.addEventListener('touchstart',this.touchstart,false);
			document.addEventListener('touchmove',this.scroll,false);
		},
		beforeDestroy(){
			document.removeEventListener('touchmove',this.scroll,false);
			document.removeEventListener('touchstart',this.touchstart,false);
		},
		methods:{
			touchstart(e){
				this.startY=e.touches[0].pageY;
			},
			load(type){
				this.list=[];
				this.nowLen=0;
				this.total=0;
				this.page=1;
				this.loadingmore=false;
				this.getAccount();
			},
			scroll(e){
				let self=this;
				if (this.nowLen<this.total&& !this.loadingmore) {
					let scrollTop=document.body.scrollTop;
					let clientheight=this.$refs.scrollMain.clientHeight;
					let winheight=window.innerHeight;
					if (clientheight-scrollTop<winheight+20) {
						let nowy=e.touches[0].pageY;
						if (nowy<self.startY) {
							e.preventDefault();
						}
						this.page++;
						this.loadingmore=true;
						this.getAccount();
					}
				}
			},
			getAccount(){
				let tabValue=this.tabValue;
				getAccount(this.tabValue,this.page).then(res=>{
					if (tabValue==this.tabValue) {
						if (res.code==1) {
							let list=res.data.list;
							this.nowLen+=list.length;
							this.total=res.data.total;
							this.list=this.list.concat(res.data.list);

						}
						this.loadingmore=false;
					}
				});
			}
		}
	}
</script>
<style type="text/css" scoped>
	.main .icon {
		width: 84px;
		height: 84px;
	}

	.guess-list {
		padding-left: 40px;
	}

	.guess-item {
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		overflow: hidden;
	}

	.guess-num {
		margin-left: 16px;
	}

	.guess-price {
		margin-top: 8px;
		color: #958DA5;
		font-size: 32px;
	}

	.guess-success:after {
		position: absolute;
		right: -46px;
		bottom: -84px;
		content: " ";
		width: 0;
		height: 0;
		border-left: 44px solid #FF9F03;
		border-top: 44px solid transparent;
		border-bottom: 44px solid transparent;
		transform: rotateZ(45deg);
	}

	.zhui-hao {
		position: absolute;
		right: -36px;
		bottom: -50px;
		font-size: 20px;
		transform: scale(0.8);
		z-index: 1;
		color: #FFF;
	}
</style>